<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script src="./lib/vue-2.4.0.js"></script>
    </head>
    
    <body>
        <div id="app">
            <!-- 分析： -->
            <!-- 1. 我们要监听 文本框数据的改变，这样才能知道 什么时候去拼接出一个 fullname -->
            <!-- 2. 如何监听到 文本框的数据改变呢？？？ -->

            <input type="text" v-model="firstname"> + 
            <input type="text" v-model="middlename"> + 
            <input type="text" v-model="lastname"> =  
            <input type="text" v-model="fullname">          
            
            <p>{{ fullname }}</p>
            <p>{{ fullname }}</p>
            <p>{{ fullname }}</p>
        </div>

        <script>
            var vm = new Vue({
                el: '#app',
                data: {
                   firstname: '',
                   lastname: '',
                   middlename: ''
                },
                methods: {
                   
                },
                // 在 computed 中，可以定义一些 属性，这些属性，叫做 【计算属性】，
                // 计算属性的本质，就是 一个方法，只不过，我们在使用 这些计算属性的
                // 时候，是把 他们的 名称，直接当作 属性来使用的；并不会把 计算属性
                // 当作方法去使用；

                // 注意1：计算属性，在引用的时候，一定不要加小括号去调用，直接把它
                // 当作 普通属性去使用就好了；

                // 注意2：只要 计算属性，这个 function 内部，使用到的任何 data 中
                // 数据发生了变化，就会立即重新计算 这个 计算属性的值

                // 注意3：计算属性的求值结果，会被缓存起来，方便下次直接使用； 如果
                // 计算属性方法中，所以来的任何数据，都没有发生过变化，则，不会重新对
                // 计算属性求值;
                computed: {
                    'fullname': function() {
                        console.log('ok')
                        return this.firstname + '-' + this.middlename + '-' + this.lastname
                    }
                }
            });



            // 1. computed 属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算，
            //    主要当作属性来使用；

            // 2. metheds 方法表示一个具体的操作，主要书写业务逻辑；
            
            // 3. watch 一个对象，键是需要观察的表达式，值是对应回调函数，主要用来监听
            //    某些特定数据的变化，从而进行某些具体的业务逻辑操作；可以看作是
            //    computed 和 methods 的结合体；
        </script>
    </body>
</html>